<script setup lang="ts">
import {StorageRecord, StorageService} from "../../service/StorageService";
import {nextTick, onMounted, ref} from "vue";
import {Dialog} from "../../lib/dialog";
import {t} from "../../lang";

const props = defineProps({
    modelValue: {
        type: Array as () => number[],
        default: () => []
    },
    biz: {
        type: String,
        required: true
    },
    limit: {
        type: Number,
        default: -1
    },
    title: {
        type: String,
        default: '请选择'
    },
    recordFilter: {
        type: Function,
        default: (r: StorageRecord) => true
    },
    disabled: {
        type: Boolean,
        default: false
    }
});
const emit = defineEmits<{
    (e: 'update:modelValue', value: number[]): void
}>()
const table = ref<any>(null);
const visible = ref(false);
const records = ref<StorageRecord[]>([]);
const recordsSelect = ref<StorageRecord[]>([]);
const recordIdsSelect = ref<number[]>([]);
const doLoad = async () => {
    records.value = await StorageService.list(props.biz as any)
    if (props.recordFilter) {
        records.value = records.value.filter(props.recordFilter as any)
    }
    nextTick(() => {
        if (props.modelValue) {
            recordsSelect.value = records.value.filter(r => props.modelValue.includes(r.id as number))
        }
        table.value?.select(records.value.map(r => r.id), false)
    })
}
const doShow = () => {
    visible.value = true
    recordIdsSelect.value = []
    table.value?.select(records.value.map(r => r.id), false)
};
onMounted(() => {
    doLoad()
});
const doConfirm = () => {
    const ids = recordsSelect.value.map(item => item.id) as number[];
    const idsNew: number[] = []
    const recordsNew: StorageRecord[] = []
    for (const r of records.value) {
        if (ids.includes(r.id as number)) {
            continue
        }
        if (recordIdsSelect.value.includes(r.id as any)) {
            idsNew.push(r.id as number)
            recordsNew.push(r)
        }
    }
    if (props.limit > 0 && ids.length + idsNew.length > props.limit) {
        Dialog.tipError(t(`最多只能选择{count}个`, {count: props.limit}))
        return
    }
    ids.push(...idsNew)
    recordsSelect.value.push(...recordsNew)
    visible.value = false;
    emit('update:modelValue', ids)
};
const doDelete = (id: number) => {
    const index = recordsSelect.value.findIndex(r => r.id === id)
    if (index !== -1) {
        recordsSelect.value.splice(index, 1)
    }
    const ids = recordsSelect.value.map(item => item.id) as number[];
    emit('update:modelValue', ids)
};
const onSelectChange = (keys: number[]) => {
    recordIdsSelect.value = keys
};
</script>

<template>
    <div class="">
        <div v-if="recordsSelect.length>0" class="border pt-2 pl-2 pr-1 pb-1 rounded-lg mb-2">
            <div v-for="r in recordsSelect"
                 class="inline-flex items-center mr-1 mb-1 bg-gray-100 rounded-full p-1 pl-3">
                <div>
                    {{ r.title }}
                </div>
                <div>
                    <a-button size="mini" shape="round"
                              :disabled="props.disabled"
                              @click="doDelete(r.id as number)">
                        <template #icon>
                            <icon-close/>
                        </template>
                    </a-button>
                </div>
            </div>
        </div>
        <div v-if="props.limit<0 || recordsSelect.length<props.limit">
            <a-button @click="doShow" :disabled="props.disabled">
                <template #icon>
                    <icon-plus/>
                </template>
                点击添加
            </a-button>
        </div>
    </div>
    <a-modal
        v-model:visible="visible"
        :title="props.title"
        width="60vw"
        :destroy-on-close="true">
        <template #footer>
            <a-button @click="visible = false">取消</a-button>
            <a-button type="primary" @click="doConfirm">确定</a-button>
        </template>
        <div class="-mx-4 -my-5">
            <a-table
                ref="table"
                @selection-change="onSelectChange"
                :data="records"
                :row-selection="{type:'checkbox',showCheckedAll:true,onlyCurrent:false}"
                row-key="id"
                :bordered="false"
                :pagination="false"
                :virtual-list-props="{height:'50vh'}"
                :columns="[{title: '名称',dataIndex: 'title'}]">
            </a-table>
        </div>
    </a-modal>
</template>

<style scoped>

</style>
